<template>
  <div class="register-form">
    <form>
      <div class="form-group">
        <label for="reg-username">用户名：</label>
        <input 
          type="text" 
          id="reg-username" 
          placeholder="请输入用户名"
        />
      </div>
      <div class="form-group">
        <label for="reg-password">密码：</label>
        <input 
          type="password" 
          id="reg-password" 
          placeholder="请输入密码"
        />
      </div>
      <div class="form-group">
        <label for="reg-confirm">确认密码：</label>
        <input 
          type="password" 
          id="reg-confirm" 
          placeholder="请确认密码"
        />
      </div>
      <button type="submit" class="submit-btn">注册</button>
    </form>
  </div>
</template>

<script setup lang="ts">
// 可补充注册逻辑，比如调用接口、校验密码一致性等
</script>

<style scoped>
.register-form h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: #333;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #555;
}

.form-group input {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.submit-btn {
  width: 100%;
  padding: 0.7rem;
  background-color: #667eea;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-left: 15px;
  margin-top: 20px;
}

.submit-btn:hover {
  background-color: #5a4b9a;
}
</style>